<template>
	<div class="purchaseGoods">
		<!-- <image class="back-btn" src="/static/headerIcon/leftIcon.png" mode="" @tap="handleBack"></image> -->
		<headerCom style="padding:0 28rpx" :searchShow="false" />

		<div class="goodsItem" v-if="list.length !== 0">
			<div class="headerPart">
				<div class='title'>预约单</div>
				<div class="icon">
					<image style="width: 100%; height:100%" src="../../static/purchaseGoods/icon.png" alt="" />
				</div>
				<!-- <div class="reload" @click="getGoodsFun">
					<uni-icons type="loop" color="#898A8F" size="20"></uni-icons>
					换一批
				</div> -->
			</div>
			<!-- <div class='goodsList'>
				<div class='goodsListItem' v-for="(d,t) in goodsListArr" :key="d.id">
					<div class="goodsItem-left">
						<div class="goodsMainImage">
							<image style="width:100%;height:100%" :src="d.coverUrl" alt="" />
						</div>
						<div class='goodsInfo'>
							<div class='title'><span style="color: var(--tm-themeColor-text4);">(包邮)</span>{{d.title}}
							</div>

							<div class="price">{{d.price}}</div>
						</div>
					</div>
				</div>
			</div> -->
			<view class="list-content">
				<view class="list-item" v-for="(item,index) in list" :key="index" @tap.stop="selectGoods(item)">
					<view class="title-img" v-if="item.sessionState == 1">AI为您抢单中</view>
					<view class="title-img" v-else>预约成功</view>
					<view class='cat-img-box'>
						<image src="@/static/aiSubscribe.png" class='cat-img' v-if="item.sessionState == 1"></image>
						<image src="@/static/subscribe.png" class='cat-img' v-else></image>
						<!-- <view class="belongSessions" v-if='item.belongSessions'>
							{{item.belongSessions==1?'上午场':item.belongSessions==2?'下午场':item.belongSessions==3?'晚上场':''}}
						</view> -->
					</view>

					<view class="cat-info">
						<view class="cat-title">{{item.sessionName}}</view>
						<view class="price-content">
							<view class="price"> <text class="_dh">
									{{item.payType == 1 ? '多多券' : '多贝'}}
								</text> {{item.sellPrice}}
							</view>
							<view class="num-content">
								<image src="@/static/shop/del.png" class="del-img" @tap.stop="del(item)"></image>
							</view>
						</view>
					</view>
				</view>

			</view>
		</div>
		<div v-else class="null-data">
			<image src="../../static/purchaseGoods/yydNull.png" mode="" class="img"></image>
			<view class="title">暂时还没有预约成功单哦～</view>
		</div>
		<div class='amountBox' v-if='goodsListArr.length!=0'>
			<div class='amount'>
				<span>合计:</span>
				<div class='price'>{{allPrice}}</div>
			</div>
			<div class='btnSure' @click="handleSurePopup">
				确定
			</div>
		</div>

		<uni-popup ref="goodsPopup" :mask-click="false">
			<div class='popup relative' v-if='nearestTimeDate'>
				<div class='tipIcon absolute'>
					<image src="../../static/purchaseGoods/shopCart1.png" style="width: 100%;    display: contents;"
						model="" alt="" />
				</div>
				<div class="close absolute" @click="handleClose">
					<image src="../../static/purchaseGoods/close.png" style="width: 100%;    display: contents;"
						alt="" />
				</div>
				<div class='title'>订货</div>

				<div class='countDownBox'>
					订货开放倒计时
					<countDown v-if='nearestTimeDate' :styleType='1' :state='nearestTimeDate.state'
						:targetTimestamp="nearestTimeDate.state == 1?nearestTimeDate.nextBeginTimestamp:Date.now()"
						@refreshInterface='handleNearestTime' />
				</div>
				<div class='select'>
					请选择订货时间段
				</div>
				<div class='selectValue'>

					<div class='selectItem' :class="{'activeSelect':selectIndex == item.id}"
						@click='handleSelect(item.id)' v-for='item in nearestTimeDate.list' :key='item.name'>
						{{item.name}}
						<div class='rush'
							v-if='nearestTimeDate&&nearestTimeDate.belongSessions==item.id&&nearestTimeDate.state == 2'>
							开放中
							<countDown :styleType='2' :state='nearestTimeDate.state'
								:targetTimestamp="nearestTimeDate.endTimestamp" @refreshInterface='handleNearestTime' />
						</div>
						<div v-else class="timeRange">
							{{item.timeRange}}
						</div>
					</div>
					<!-- 	<div class='selectItem' :class="{'activeSelect':selectIndex == 2}" @click='handleSelect(2)'>
						下午场
						<div class='rush'
							v-if='nearestTimeDate&&nearestTimeDate.belongSessions==2&&nearestTimeDate.state == 2'>
							预约中
							<countDown :styleType='2' :state='nearestTimeDate.state'
								:targetTimestamp="nearestTimeDate.endTimestamp" @refreshInterface='handleNearestTime' />
						</div>
					</div>
					<div class='selectItem' :class="{'activeSelect':selectIndex == 4}" @click='handleSelect(4)'>
						傍晚场
						<div class='rush'
							v-if='nearestTimeDate&&nearestTimeDate.belongSessions==4&&nearestTimeDate.state == 2'>
							预约中
							<countDown :styleType='2' :state='nearestTimeDate.state'
								:targetTimestamp="nearestTimeDate.endTimestamp" @refreshInterface='handleNearestTime' />
						</div>
					</div>
					<div class='selectItem' :class="{'activeSelect':selectIndex == 3}" @click='handleSelect(3)'>
						晚上场
						<div class='rush'
							v-if='nearestTimeDate&&nearestTimeDate.belongSessions==3&&nearestTimeDate.state == 2'>
							预约中
							<countDown :styleType='2' :state='nearestTimeDate.state'
								:targetTimestamp="nearestTimeDate.endTimestamp" @refreshInterface='handleNearestTime' />
						</div>
					</div> -->
				</div>
				<div class='select-1'>
					订货额度
				</div>
				<div class="select-2" style="flex-wrap: wrap; line-height: 34rpx;">
					<view class="">
						多多券：{{jinwei(userBalanceInfo.balance||0)}}
					</view>
					<view class="" style="margin: 0 30rpx;">
						多贝：{{jinwei(userBalanceInfo.happyBean) || 0}}
					</view>
					<!-- <view v-if="userInfo.lockLevel > 0" class="">
						多贝(联创)：{{jinwei(userBalanceInfo.lockHappyBean) || 0}}
					</view> -->
				</div>

				<div class='content'>
					<div class='inputMoney'>
						<uni-easyinput class="uni-mt-5" :clearable='false' style="height: 80rpx;" v-model="money"
							placeholder="请输入订货额度" type='number'>
						</uni-easyinput>
					</div>
				</div>
				<div class="btnGroup">
					<div class="btn1" @tap="handleClose">取消</div>
					<div class="btn2" @tap="handleSure">确认</div>
				</div>
			</div>
		</uni-popup>

		<uni-popup ref="popup" :mask-click="false">
			<div class='popup relative' style='height: auto;'>
				<div class='tipIcon absolute'>
					<image src="../../static/purchaseGoods/tipIcon.png" style="width: 100%;display: contents;" alt="" />
				</div>
				<div class="close absolute" @click="handleClose">
					<image src="../../static/purchaseGoods/close.png" style="width: 100%;display: contents;" alt="" />
				</div>
				<div class='title'>温馨提示</div>
				<div class='content'>
					您已选中{{goodsListArr.length}}件商品，共计{{allPrice}}，请选择付款方式
				</div>
				<div class='tipsText' style='margin-bottom: 40rpx;'>
					（具体成交金额以实际扣款为准）
				</div>
				<div class="btnGroup">
					<!-- <div class="btn1" @tap="addCart">预付款</div> -->
					<div class="btn1" @tap="handleClose">取消</div>
					<div class="btn2" @tap="pay">去付款</div>
				</div>
			</div>
		</uni-popup>
		<uni-popup ref="aiHint" :mask-click="false">
			<view class="aiHint-box">
				<image src="@/static/purchaseGoods/icon-ai.png" mode="" class="img"></image>
				<view class="content">AI小助手为你抢单中，请耐心等待哦～</view>
			</view>
		</uni-popup>

		<!-- 订货成功 -->
		<uni-popup ref="orderSuccess" :mask-click="false">
			<view class="success-box">
				<image src="@/static/purchaseGoods/success.png" mode="" class="img"></image>
				<view class="content">订货成功</view>
			</view>
		</uni-popup>

		<uni-popup ref="paymentPopup" type="bottom" background-color="#fff">
			<view class="payment-box">
				<view class="train">
					<view class=""></view>
					<view class="title">支付</view>
					<image src="../../static/mine/close.png" mode="" class="close" @click="closePayment"></image>
				</view>
				<view class="money">{{money}}</view>
				<view class="pay-title">选择支付方式</view>
				<view class="subsection">
					<!-- <view class="payment" v-for="(item,index) in userInfo.lockLevel > 0 ? subsection : subsection.slice(0, -1)" :key="index" @click="listSwitch(index)"> -->
					<view class="payment" v-for="(item,index) in subsection" :key="index" @click="listSwitch(index)">
						<view class="label">
							<image :src="item.url" mode="" class="img"></image>
							<text class="text">{{item.label}}</text>
						</view>
						<view class=""><uni-icons :type="index == current?'checkbox-filled':'circle'"
								:color="index == current?'#EB3B27':''" size="25"></uni-icons></view>
					</view>
				</view>
				<view class="pay-box">
					<view class="pay-btn" @click="goPay">立即支付</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="isProp" :mask-click="false">
			<view class="buyProp">
				<image src="@/static/purchaseGoods/blackClose.png" class="closeImg" @tap="closeProp"></image>
				<view class="title">支付密码</view>
				<view class="numTitle">支付密码</view>
				<input placeholder="请输入支付密码" class="input-prop" placeholder-class="placeholder" type="number"
					v-model="payPassword" />
				<view class="sures" @tap="sure">确定</view>
			</view>
		</uni-popup>
		<subTabbar @options="handleShowGoods" />
	</div>
</template>

<script>
	import _ from 'lodash';
	import countDown from "../../components/basicComponent/countdown.vue"
	import {
		simpleUserBalance,
		matchGoods,
		batchAddGoodsToCart,
		nearestTime,
		appointment,
		getShoppingCart,
		deleteGoodsCart,
		personalData
	} from "../../api/api.js"
	import subTabbar from "../../components/basicComponent/subTabbar.vue"
	import headerCom from "../../components/basicComponent/market/headerCom.vue"
	export default {
		name: '',
		components: {
			headerCom,
			subTabbar,
			countDown
		},
		data() {
			return {
				selectIndex: 1,
				allPrice: 0,
				money: '',
				goodsListArr: [],
				userBalanceInfo: {},
				nearestTimeDate: null,
				payPassword: '', //支付密码
				current: 0, //切换标识
				subsection: [{
						label: '多贝支付',
						value: '2',
						url: '../../static/purchaseGoods/hd.png',
					},
					{
						label: '多多券支付',
						value: '1',
						url: '../../static/purchaseGoods/dhq.png',
					},
					// {
					// 	label: '多贝(联创)支付',
					// 	value: '3',
					// 	url: '../../static/purchaseGoods/hdlc.png',
					// }
				],
				list: [],
				total: 0,
				isAllSelect: false,
				selectLength: 0,
				cartIds: '',
				userInfo: {}
			}
		},
		// created() {
		// 	this.handleNearestTime()
		// },
		onShow() {
			uni.hideTabBar()
			simpleUserBalance().then(res => {
				console.log('userBalance', res)
				this.userBalanceInfo = res.data
			})
			personalData().then(res => {
				this.userInfo = res.data
			})
			this.handleNearestTime()
			// 获取列表数据
			this.getList()
		},
		onHide() {
			// uni.showTabBar()
		},
		mounted() {



		},
		computed: {
			accountNum() {
				return this.goodsListArr.map(item => item.id)
			}
		},

		methods: {
			getList() {
				let data = {}
				getShoppingCart(data).then(res => {
					if (res.code == 200) {
						res.data.records.forEach(item => {
							item.isSelect = false
						})
						this.list = res.data.records
					}
				})
			},
			del(item) {
				let data = {
					id: item.id
				}
				deleteGoodsCart(data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						// 获取列表数据
						this.getList()
					}
				})
			},
			listSwitch(index) {
				this.current = index; //激活样式
			},
			handleNearestTime() {
				nearestTime().then(res => {
					this.nearestTimeDate = res.data
					this.selectIndex = res.data.belongSessions
					this.$nextTick(() => {
						this.$refs.goodsPopup.open('center')
					})

				})
			},
			handleSelect(index) {
				this.selectIndex = index
			},
			// 加入购物车
			addCart() {
				let data = {
					goodsIds: this.accountNum.join(',')
				}
				batchAddGoodsToCart(data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '加入购物车成功',
							icon: 'none'
						})
						this.$refs.popup.close()
					}
				})
			},
			// 去结算
			pay() {
				uni.navigateTo({
					url: '../goods/catSubmitOrder?cartIds=' + this.accountNum.join(',') +
						'&isPurchase=1&summary=' + this.money
				})
			},
			handleSurePopup() {
				this.$refs.popup.open('center')
			},
			handleShowGoods() {
				this.money = ''
				this.$refs.goodsPopup.open('center')
			},
			handleClose() {
				this.$refs.goodsPopup.close()
				this.$refs.popup.close()
			},
			checkChildrenBoxChange(e, i, k) {
				i.ischeck = !i.ischeck
			},

			handleSure() {
				console.log('sure')
				if (!this.money) {
					uni.showToast({
						title: '请输入金额',
						icon: 'none',
					});
					return
				}
				// this.$refs.aiHint.open();
				// this.getGoodsFun()
				// setTimeout(() => {
				// 	this.$refs.aiHint.close();
				// }, 2000);

				this.$refs.paymentPopup.open();
			},
			getGoodsFun: _.debounce(
				function() {
					matchGoods({
						sessionId: this.selectIndex,
						summary: this.money
					}).then(res => {
						console.log('matchGoods', res)
						if (res.code == 200) {

							this.goodsListArr = res.data.goodsList
							this.allPrice = res.data.summary
							this.handleClose()
						} else {
							this.goodsListArr = []
							this.handleClose()
						}

					})
				}, 1000, {
					'leading': true, //在延迟开始前立即调用事件
					'trailing': false, //在延时结束后不调用,保证事件只被触发一次
				}
			),
			closePayment() {
				this.$refs.paymentPopup.close();
			},
			goPay() {
				this.payPassword = '';
				this.$refs.paymentPopup.close();
				this.$refs.isProp.open();

			},
			closeProp() {
				var that = this
				uni.showModal({
					title: '取消支付',
					content: '是否确定取消支付',
					confirmColor: 'rgba(250, 46, 44, 1)',
					success: (res) => {
						if (res.confirm) {
							this.$refs.isProp.close();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			sure() {
				let data = {
					sessionId: this.selectIndex,
					amount: this.money,
					payPassword: this.payPassword,
					walletType: this.subsection[this.current].value,
				}
				appointment(data).then(res => {
					if (res.code == 200) {
						console.log(this.nearestTimeDate)
						this.$refs.isProp.close();
						this.$refs.paymentPopup.close();
						this.$refs.goodsPopup.close();
						if (this.nearestTimeDate.state == 2) {
							// 抢单中
							this.$refs.aiHint.open();
							setTimeout(() => {
								this.$refs.aiHint.close();
							}, 2000)
						} else {
							// 订货成功
							this.$refs.orderSuccess.open();
							setTimeout(() => {
								this.$refs.orderSuccess.close();
							}, 2000)
						}
						this.getList();
						simpleUserBalance().then(res => {
							console.log('userBalance', res)
							this.userBalanceInfo = res.data
						})
					}
				})
			},
			selectGoods(item) {
				item.isSelect = !item.isSelect
				this.componentPrice()
			},
			componentPrice() {
				this.total = 0
				this.selectLength = 0
				this.list.forEach(item => {
					if (item.isSelect) {
						this.total = this.total + (Number(item.sellPrice) * Number(item.quantity))
						this.selectLength++
					}
				})
				var isAll = this.list.every(item => item.isSelect)
				this.cartIds = this.list.filter(item => item.isSelect).map(jitem => jitem.id).join(',')
				if (isAll) {
					this.isAllSelect = true
				} else {
					this.isAllSelect = false
				}
			},
			handleBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.popup {
		width: 616rpx;
		// height: 598rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 80rpx 40rpx 40rpx 40rpx;
		box-sizing: border-box;


	}

	.reload {
		display: flex;
		align-items: center;
		font-weight: 500;
		font-size: 32rpx;
		color: #898A8F;
		margin-left: 60rpx;
	}

	/deep/ .uni-easyinput__content-input {
		padding-right: 50rpx !important;
	}

	.popup .selectValue {
		width: 536rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-content: center;
		justify-items: center;
		margin-bottom: 48rpx;


		.selectItem {
			width: 252rpx;
			height: 80rpx;
			border-radius: 16rpx;
			border: 2rpx solid #898A8F;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #151822;


			.rush {
				font-weight: 400;
				font-size: 20rpx;
				margin-top: 10rpx;
				display: flex;
				align-items: center;
			}

			&:nth-child(1) {
				margin-bottom: 20rpx;
			}
			.timeRange{
				font-size: 20rpx;
				margin-top: 2px;
			}
		}

		.activeSelect {
			border: 2rpx solid #EB3B27;
			color: var(--tm-themeColor-text3);
			position: relative;
		}

		.activeSelect::before {
			content: '';
			position: absolute;
			right: 0;
			bottom: 0;
			width: 40rpx;
			height: 40rpx;
			background: url("@/static/purchaseGoods/checkState.png") no-repeat;
			background-position: 2rpx;
			background-size: 100% 100%;
		}
	}

	.popup .select {
		font-weight: 400;
		font-size: 28rpx;
		color: #0F1724;
		margin-bottom: 24rpx;
	}

	.popup .select-1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #0F1724;
		margin-bottom: 10rpx;
	}

	.popup .select-2 {
		font-weight: 400;
		font-size: 22rpx;
		color: #5B5D64;
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
	}

	.popup .content {
		font-weight: 400;
		font-size: 32rpx;
		color: #151822;
		margin-top: 24rpx;
		text-align: center;
		line-height: 60rpx;
		margin-bottom: 40rpx;

		.inputMoney {
			position: relative;
			height: 80rpx;



			.moneyIcon {
				position: absolute;
				right: 20rpx;
				top: 50%;
				bottom: 50%;
				transform: translateY(-50%);

				width: 33rpx;
				height: 46rpx;
			}
		}
	}

	.popup .btnGroup {
		width: 536rpx;
		justify-content: space-between;
		display: flex;
		justify-content: space-between;
		position: absolute;
		// bottom: -40rpx;
		left: 50%;
		right: 50%;

		transform: translateX(-50%);

		.btn1 {
			width: 256rpx;
			height: 90rpx;
			background: #F8F8F8;
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #151822;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.btn2 {
			width: 256rpx;
			height: 90rpx;
			background: var(--tm-themeColor-level1);
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.popup .close {
		width: 48rpx;
		height: 48rpx;
		top: 28rpx;
		right: 28rpx
	}

	.popup .tipIcon {
		width: 128rpx;
		height: 128rpx;
		top: -64rpx;
		left: 50%;
		right: 50%;
		transform: translateX(-50%);
	}

	.popup .title {
		font-weight: 500;
		font-size: 40rpx;
		color: #0F1724;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.amountBox {
		width: 98%;
		height: 100rpx;
		background: var(--tm-themeColor-level1);
		border-radius: 100rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 160rpx;
		left: 50%;
		right: 50%;
		transform: translateX(-50%);

		.amount {
			width: 70%;
			height: 100rpx;
			background: url('@/static/purchaseGoods/amount.png') no-repeat;
			background-position: -2rpx;
			background-size: 100%;
			display: flex;
			align-items: center;
			padding-left: 40rpx;
			box-sizing: border-box;
			font-weight: 500;
			font-size: 32rpx;
			color: #151822;

			.price {
				font-weight: bold;
				font-size: 40rpx;
				color: #151822;

			}

			// .price::before {
			// 	content: '¥';
			// 	// width: 22rpx;
			// 	// height: 22rpx;
			// 	// background: url('@/static/happyBin.png') no-repeat;
			// 	// background-size: 100% 100%;
			// 	// display: inline-block;
			// 	font-weight: bold;
			// 	font-size: 32rpx;
			// 	color: #151822;
			// }
		}

		.btnSure {
			width: 30%;
			height: 100%;
			font-weight: 600;
			font-size: 36rpx;
			color: #151822;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-right: 30rpx;
			box-sizing: border-box;
		}
	}

	.purchaseGoods {
		position: relative;
		padding: 180rpx 0rpx 180rpx 0rpx;
		box-sizing: border-box;

		.goodsItem {
			width: 100%;
			height: auto;
			min-height: 296rpx;
			background: url("../../static/purchaseGoods/bg.png") no-repeat;
			background-size: 100%;
			padding: 0 28rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			margin-top: 40rpx;
			gap: 20rpx;

			.headerPart {
				width: 100%;
				display: flex;
				height: 100rpx;
				margin-bottom: 20rpx;

				.title {
					width: 240rpx;
					font-weight: 600;
					font-size: 44rpx;
					color: #151822;
					display: flex;
					justify-content: start;
					align-items: center;
					padding-left: 20rpx;
					box-sizing: border-box;
					// letter-spacing: 60rpx;
					/* 增加字母间隔 */
				}

				.icon {
					width: 150rpx;
					height: 52rpx;
					margin-top: 20rpx;
				}
			}

			.goodsList {
				padding: 30rpx 0;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				height: 850rpx;
				overflow-y: auto;

				.goodsListItem {
					display: flex;
					height: 208rpx;
					justify-content: space-between;
					margin-bottom: 20rpx;
					background: #fff;
					border-radius: 20rpx 20rpx 0 0;

					.goodsItem-left {
						display: flex;
						height: 200rpx;

						.goodsMainImage {
							width: 200rpx;
							flex: 1;
							height: 200rpx;
							border-radius: 18rpx;
							overflow: hidden;
							margin-right: 20rpx;
						}

						.goodsInfo {
							width: 362rpx;
							display: flex;
							flex-direction: column;
							height: 100%;
							padding-top: 20rpx;
							flex: 1;
							padding-bottom: 20rpx;
							box-sizing: border-box;
							justify-content: space-between;

							.title {
								width: 434rpx;
								font-weight: 500;
								font-size: 28rpx;
								color: #0F1724;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								line-height: 30rpx;
							}

							.appointments {
								font-weight: 400;
								font-size: 24rpx;
								color: rgba(21, 24, 34, 0.8);
							}

							.price {
								font-weight: bold;
								font-size: 36rpx;
								color: #151822;

							}

							// .price::before {
							// 	content: '¥';

							// 	// width: 22rpx;
							// 	// height: 22rpx;
							// 	// background: url('@/static/happyBin.png') no-repeat;
							// 	// background-size: 100% 100%;
							// 	// display: inline-block;
							// 	font-weight: bold;
							// 	font-size: 24rpx;
							// 	color: #151822;
							// }
						}

					}

					.goodsItem-right {
						display: flex;
						justify-content: center;
						align-items: center;
						padding-left: 28rpx;
						box-sizing: border-box;
					}
				}
			}


			.childItem {
				width: 100%;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.06);
				border-radius: 24rpx;
				padding: 28rpx 40rpx;
				box-sizing: border-box;


				.childItemHeader {
					width: 100%;

					display: flex;
					justify-content: space-between;

					.childName {
						font-weight: 500;
						font-size: 36rpx;
						color: #151822;
					}
				}

				.groundData {
					margin-top: 24rpx;
					display: flex;
					justify-content: space-between;

					.basicInfo {
						font-weight: 400;
						font-size: 28rpx;
						color: #898A8F;
					}

					.showMore {
						font-weight: 400;
						font-size: 28rpx;
						color: #898A8F;
						display: flex;
						align-items: center;

						.icon {
							width: 36rpx;
							height: 36rpx;
						}
					}
				}

			}

			.pull-up-wrap {
				display: flex;
				align-items: center;
				justify-content: center;

				.load-view {
					padding: 20rpx 0;
					display: flex;
					align-items: center;
					justify-content: center;

					.pull-up-animation {
						width: 32rpx;
						height: 32rpx;
						border-width: 4rpx;
						border-style: solid;
						border-radius: 50%;
						animation: spin 0.5s linear infinite;
					}

					.pull-up-text {
						margin-left: 10rpx;
					}
				}
			}


		}
	}

	.back-btn {
		position: fixed;
		left: 20rpx;
		top: 70rpx;
		z-index: 3;
		width: 44rpx;
		height: 44rpx;
	}

	.tipsText {
		font-weight: 400;
		font-size: 22rpx;
		color: #898A8F;
		text-align: center;
	}

	/deep/.uni-easyinput__content-input {
		height: 80rpx;
	}

	/deep/ .uni-input-placeholder {
		font-size: 32rpx;
	}

	/deep/ .uni-input-input {
		font-size: 38rpx;
		font-weight: bold;
	}

	.countDownBox {
		width: 468rpx;
		height: 56rpx;
		background: var(--tm-themeColor-level1-3);
		border-radius: 16rpx;
		margin: 0 auto;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #151822;
	}

	.aiHint-box {
		display: flex;
		align-items: center;
		width: 694rpx;
		height: 100rpx;
		background: linear-gradient(160deg, #FFF4F2 0%, #FFCCC5 100%);
		border-radius: 32rpx;
		border: 4rpx solid #FFFFFF;
		padding: 0 36rpx;
		box-sizing: border-box;

		.img {
			width: 60rpx;
			height: 60rpx;
			margin-right: 10rpx;
		}

		.content {
			font-weight: 400;
			font-size: 32rpx;
			color: #151822;
		}
	}

	.success-box {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 400rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: linear-gradient(180deg, #FFBCBC 0%, #F16565 100%);
		border-radius: 24rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.8);
		box-sizing: border-box;

		image {
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
		}

		.content {
			font-weight: 500;
			font-size: 32rpx;
			color: #2D2D2D;
		}
	}

	.payment-box {
		// padding: 0 28rpx;
		background-color: #F6F6FA;

		.train {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 28rpx;

			.title {
				font-size: 36rpx;
				color: #151822;
				font-weight: 600;
			}

			.close {
				width: 34rpx;
				height: 34rpx;

			}
		}

		.money {
			font-weight: bold;
			font-size: 68rpx;
			width: 100%;
			text-align: center;
		}

		.pay-title {
			font-size: 28rpx;
			color: #898A8F;
			margin: 40rpx 0 20rpx 0;
			margin-left: 28rpx;
		}

		.subsection {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-radius: 8rpx;
			padding: 0 20rpx;
			margin: 0 28rpx;

			.payment {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 20rpx 0;
			}

			.label {
				font-size: 28rpx;
				color: #151822;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.img {
					width: 36rpx;
					height: 36rpx;
				}

				.text {
					margin-left: 10rpx;
				}
			}

			.active {
				/*激活样式*/
				color: #1776FF;
				// background-color: #1776FF;
			}
		}

		.pay-box {
			background-color: #fff;
			box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(0, 0, 0, 0.06);
			margin-top: 38rpx;
			padding-bottom: 50rpx;
			padding-top: 10rpx;

			.pay-btn {
				width: 694rpx;
				height: 88rpx;
				background: #EB3B27;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				color: #ffffff;
				font-weight: 500;
				border-radius: 10rpx;
				margin: 0 auto;
			}
		}
	}

	.buyProp {
		padding-bottom: 40rpx;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 560rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.closeImg {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 37rpx;
			right: 25rpx;
		}

		.title {
			margin-top: 38rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
			line-height: 42rpx;
		}

		.numTitle {
			margin-top: 46rpx;
			width: 470rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 37rpx;
		}

		.input-prop {
			margin-top: 12rpx;
			height: 88rpx;
			width: 470rpx;
			background: #F8F8F8;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #F2F2F2;
		}

		.placeholder {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #808080;
			line-height: 33rpx;
		}

		.sures {
			margin-top: 60rpx;
			text-align: center;
			line-height: 86rpx;
			width: 470rpx;
			height: 86rpx;
			background: #EB3B27;
			border-radius: 20rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}

		.codes {
			position: absolute;
			right: 43rpx;
			bottom: 210rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1777FF;
			line-height: 33rpx;
		}
	}

	.list-content {
		padding-bottom: 150rpx;

		.list-item {
			margin-top: 52rpx;
			display: flex;
			align-items: center;
			width: 678rpx;
			height: 248rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 10rpx solid #FF8573;
			position: relative;

			.title-img {
				width: 296rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				font-weight: 600;
				font-size: 36rpx;
				color: #151822;
				position: absolute;
				top: -40rpx;
				left: 50%;
				margin-left: -148rpx;
				background-image: url('@/static/purchaseGoods/rectangle.png');
				background-repeat: no-repeat;
				background-size: cover;
			}

			.select {
				width: 40rpx;
				height: 40rpx;
				margin: 0 20rpx;
			}

			.cat-img-box {
				width: 192rpx;
				height: 192rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.cat-img {
				width: 192rpx;
				height: 192rpx;
				border-radius: 10rpx;
				margin-left: 12rpx;

			}

			.belongSessions {
				position: absolute;
				bottom: 10rpx;
				left: 10rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
				background: rgba(0, 0, 0, 0.6);
				border-radius: 4px;
				width: 72rpx;
				text-align: center;
				line-height: 40rpx;
			}

			.cat-info {
				margin-left: 20rpx;
				width: 450rpx;

				.cat-title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 40rpx;
					color: #1F1F1F;
					line-height: 44rpx;
					font-style: normal;
					overflow: hidden;
					text-overflow: ellipsis; //文本溢出显示省略号
					white-space: nowrap; //文本不会换行
				}


				.price-content {
					margin-top: 58rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						font-family: Roboto, Roboto;
						font-weight: bold;
						font-size: 36rpx;
						color: #151822;

						._dh {
							font-size: 32rpx;
							font-weight: bold;
							margin-right: 10rpx;
						}
					}

					// .price::before {
					// 	content: '¥';
					// 	// width: 22rpx;
					// 	// height: 22rpx;
					// 	// background: url('@/static/happyBin.png') no-repeat;
					// 	// background-size: 100% 100%;
					// 	// display: inline-block;
					// 	// font-weight: bold;
					// 	// margin-right: 4rpx;
					// 	font-size: 20rpx;
					// 	// color: #151822;

					// }

					.num-content {
						// display: flex;
						// align-items: center;
						position: absolute;
						right: 20rpx;

						.del-img {
							width: 22px;
							height: 22px;
						}

						.num-img {
							width: 40rpx;
							height: 40rpx;
						}

						.num {
							width: 60rpx;
							height: 40rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #0F1724;
							line-height: 40rpx;
							font-style: normal;
							text-align: center;
						}
					}
				}
			}
		}
	}

	.null-data {
		width: 100%;
		text-align: center;
		margin-top: 200rpx;

		.img {
			width: 270rpx;
			height: 270rpx;
		}

		.title {
			font-size: 28rpx;
			color: #808080;
			margin-top: 20rpx;
		}
	}
</style>